<template>
	<view class="cover-img" :style="{height: windowHeight + 'px'}">
		<camera mode="normal" device-position="back" flash="off" :style="{height:cameraHeight + 'px'}">
			<cover-view class="controls" style="width: 100%;height: 100%;">
				<cover-image class="icon-w569-h828" src="/static/images/rxx.png" />
			</cover-view>
		</camera>
		<view class="bottom font-36-fff">
			<view class="wrap">
				<view class="back" @click="back">取消</view>
				<view @click="takePhoto">
					<image class="icon-w131-h131" src="/static/images/pz.png">
					</image>
				</view>
				<view @click="chooseImage">
					相册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cameraContext: {},
				cameraHeight:''
			};
		},
		created() {
			let systemInfo = uni.getSystemInfoSync()
			this.windowHeight = systemInfo.windowHeight
			this.cameraHeight = systemInfo.windowHeight - 80
			if (uni.createCameraContext) {
				this.cameraContext = uni.createCameraContext()
			} else {
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
		},
		methods: {
			back(){
				this.$emit('show',false)
			},
			// 拍照
			takePhoto() {
				this.cameraContext.takePhoto({
					quality: 'normal',
					success: (res) => {
						this.$emit("photo",res.tempImagePath)
						this.$emit('show',false)
					},
					fail: (err) => {
						uni.showToast({
							title: '拍照失败，请检查系统是否授权',
							icon: 'none',
							duration: 1200
						})
					}
				})
			},
			// 从相册选取
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.$emit("photo",res.tempFilePaths[0])
						this.$emit('show')
					},
				});
			},
		}
	}
</script>
<style lang="scss" scoped>

	.controls {
		position: relative;
		display: flex;
		// align-items: center;
		justify-content: center;
		.icon-w569-h828{
			margin-top: 200rpx;
			width: 450rpx;
			height: 450rpx;
		}
	}

	.bottom {
		width: 100%;
		background-color: #000;
		.icon-w131-h131{
			width: 100rpx;
			height: 100rpx;
		}
		.wrap {
			color: #fefefe;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80px;
			padding: 0 73rpx;
		}
	}
</style>
